<template>
  <div class="user">
    <div class="header">
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <img
              class="user-img"
              src="https://s1.ax1x.com/2022/10/25/xR4D9x.png"
              alt=""/>
            <span class="user-span">转诊类型</span>
          </div></el-col>
        <el-col :span="15" 
          ><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple" @click="addList = true">
            <div class="addList">
              <span>
                <el-button type="text" @click="dialogVisible = true"
                  >添加</el-button
                >
              </span>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
    <div class="user-list">
      <el-table :data="tableData" style="width: 75rem">
      <el-table-column width="1015px">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column>
        <template  @click="aaa=true">
          <el-button size="mini" @click="aaa=true">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <!-- 添加 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
      :modal="true"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <!--  添加窗口 -->
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="门诊名称">
          <el-input v-model="name"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >保 存</el-button
        >
      </span>
      <el-dialog :modal="true"></el-dialog>
    </el-dialog>

    <!--操作 -->

    <el-dialog title="编辑" :visible.sync="aaa" width="30%" :before-close="ttt">
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="门诊名称">
          <el-input v-model="tableData.id"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aaa = false">取 消</el-button>
        <el-button type="red">删除</el-button>
        <el-button type="primary" @click="aaa = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "type",
  data() {
    return {
      addList: false,
      operation: false,
      delet: false,
      dialogVisible: false,
      aaa: false,
      Thett:false,
      name:'',
      tableData: [
        {
          id:'1'
        },
        {
          id:'2',
          name: "专科门诊",
        },
      ],
    };
  },
  mounted(){
    // let a = this.tableData
    //   for (let item of a) {
    //       console.log(item,a);
    //       console.log(a[0].id);
    //     }
    console.log(this.tableData[0].id);
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    ttt(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="less" scoped>
ul li {
  list-style: none;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  text-align: center;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.header {
  height: 60px;
  box-sizing: border-box;
  margin-left: 30px;
  padding: 17px;
}
.user-span {
  position: relative;
  top: -7px;
  margin-left: 10px;
  font-size: 14px;
}
.user-select {
  margin-top: 5px;
}
.user-input {
  width: 248px;
  height: 25px;
  margin-top: 4px;
  border-radius: 15px;
  border: 1px solid #ccc;
}
// list
.user-list {
  overflow: hidden;
  width: 1200px;
  margin-left: 105px;
}
.grid {
  border-radius: 4px;
  min-height: 36px;
  text-align: left;
  margin-left: 70px;
}
.persList {
  height: 50px;
  margin-left: 100px;
  padding-top: 14px;
  box-sizing: border-box;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  li {
    float: left;
    margin-right: 210px;
    color: #333333;
  }
  li:last-child {
    margin-top: -10px;
    color: #199ed8;
  }
}
.addList {
  width: 60px;
  height: 30px;
  margin: 0 auto;
  border-radius: 5px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
// 新增
.theEditor {
  width: 224px;
  height: 180px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -114px;
  margin-left: -140px;
  .header-head {
    height: 32px;
    background: #f2f2f2;
    span {
      display: inline-block;
      margin: 6px 0 0 10px;
      font-size: 15px;
    }
    img {
      float: right;
      margin-top: 6px;
      margin-right: 10px;
    }
  }
  .chegatpassword {
    height: 40px;
    margin-top: 10px;
    span {
      color: #333333;
      font-size: 14px;
      margin: 0 0 0 12px;
    }
    input {
      width: 90%;
      margin-left: 10px;
    }
    select {
      width: 93%;
      margin-left: 10px;
    }
  }
  .theHospital {
    width: 224px;
    height: 163px;
    position: absolute;
    left: 100%;
    border: 1px solid #ccc;
    .search {
      width: 90%;
      height: 24px;
      border-radius: 15px;
      border: 1px solid #ccc;
      margin: 10px 0 0 10px;
      input {
        width: 150px;
        margin: 2px 0 0 5px;
        border: 0;
        outline: none;
      }
      img {
        float: right;
        margin: 3px 7px 0 0;
      }
    }
    ul li {
      margin-left: -15px;
    }
  }
  .confirm {
    height: 30px;
    display: flex;
    justify-content: right;
    margin-top: 15px;
    button {
      width: 65px;
      border: 0;
      border-radius: 5px;
      color: #fff;
      margin-right: 5px;
    }
    .save {
      background: #169bd5;
    }
    .deletes {
      background: red;
      margin: 0 5px 0 5px;
    }
    .cancel {
      background: #ccc;
    }
  }
}
// 操作
.theEditor {
  width: 224px;
  height: 130px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -114px;
  margin-left: -140px;
  .header-head {
    height: 32px;
    background: #f2f2f2;
    span {
      display: inline-block;
      margin: 6px 0 0 10px;
      font-size: 15px;
    }
    img {
      float: right;
      margin-top: 6px;
      margin-right: 10px;
    }
  }
  .chegatpassword {
    height: 40px;
    margin-top: 10px;
    span {
      color: #333333;
      font-size: 14px;
      margin: 0 0 0 12px;
    }
    input {
      width: 90%;
      margin-left: 10px;
    }
    select {
      width: 93%;
      margin-left: 10px;
    }
  }
  .theHospital {
    width: 224px;
    height: 163px;
    position: absolute;
    left: 100%;
    border: 1px solid #ccc;
    .search {
      width: 90%;
      height: 24px;
      border-radius: 15px;
      border: 1px solid #ccc;
      margin: 10px 0 0 10px;
      input {
        width: 150px;
        margin: 2px 0 0 5px;
        border: 0;
        outline: none;
      }
      img {
        float: right;
        margin: 3px 7px 0 0;
      }
    }
    ul li {
      margin-left: -15px;
    }
  }
  .confirm {
    height: 30px;
    display: flex;
    justify-content: right;
    margin-top: 15px;
    button {
      width: 65px;
      border: 0;
      border-radius: 5px;
      color: #fff;
      margin-right: 5px;
    }
    .save {
      background: #169bd5;
    }
    .deletes {
      background: red;
      margin: 0 5px 0 5px;
    }
    .cancel {
      background: #ccc;
    }
  }
}
.MaskLayer {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #adadad;
  opacity: 80%;
  z-index: 4;
  .confirmdelete {
    width: 100%;
    height: 100px;
    margin-top: 12%;
    p {
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
    .btn {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 65px;
        height: 25px;
        margin-left: 10px;
        background: red;
        border: 0;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
      }
      button:last-child {
        background: #f2f2f2;
        color: #000;
      }
    }
  }
}
</style>